import TextField from '@material-ui/core/TextField';
import InputBase from '@material-ui/core/InputBase';
import { withStyles } from '@material-ui/core/styles';

const cl = '#EDF2F7';   // bg-gray-200

const TextWhite = withStyles({
    root: {
        '& label.Mui-focused': {
            color: cl,
        },
        '& label': {
            color: cl,
        },
        '& .MuiOutlinedInput-root': {
            '& input': {
                color: cl,
            },
            '& fieldset': {
                borderColor: cl,
                color: cl,
            },
            '&:hover fieldset': {
                color: cl,
                borderColor: cl,
            },
            '&.Mui-focused fieldset': {
                color: cl,
                borderColor: cl,
            },
        },
    },
})(TextField);

const BlackInput = withStyles(theme => ({
    input: {
        borderRadius: 4,
        minWidth: 120,
        padding: '5px 26px 5px 12px',
        backgroundColor: theme.palette.background.paper,
        border: '1px solid #ced4da',
    },
}))(InputBase);

export {BlackInput, TextWhite};
